Як користуватися довідником               

Опис кожної стильової властивості відбувається за одним шаблоном, містить таблицю браузерів з номерами версій, які підтримують вказану властивість, синтаксис написання, допустимі значення, спадкоємство і до яких елементів властивість застосовується. Кожна властивість ілюструється прикладом, який показує сферу його застосування. У більшості випадків приводиться малюнок, що демонструє результат прикладу, що дозволяє наочно зрозуміти, як діє те або інша властивість CSS.

Браузери

Хоча більшість властивостей CSS описана досить давно, розробники не завжди включали їх підтримку у браузер або робили це не в повному об'ємі. З цієї причини часто виникала ситуація, коли стандарти не можна було застосовувати тільки тому, що вони не працювали. На щастя, ця ситуація виправляється і сучасні браузери підтримують специфікацію CSS 2.1 практично в повному об'ємі, хоча ще і не до кінця. Проте, при створенні універсальних веб-сторінок, які коректно відображаються в різних браузерах, необхідно знати, які властивості працюватимуть і де, а які немає. Для цього в таблиці приведені популярні браузери - Internet Explorer, Netscape, Opera, Safari і Firefox, а також використовуються наступні позначення:

Так - властивість повністю підтримується браузером з усіма допустимими значеннями;

Ні - властивість браузером не сприймається і ігнорується;

Частково - властивість підтримується лише частково, наприклад, не усі допустимі значення діють або властивість застосовується не до усіх елементів, які вказані в специфікації;

Помилки - властивість розуміється браузером, але при його роботі можлива поява різних помилок. У примітці зазвичай вказується, якого роду помилки виявляються у браузері.

Синтаксис

Кожна властивість CSS записується в наступному узагальненому виді:

  Селектор { властивість: значення; }

  Селектором називають ім'я стилю, в якому вказані параметри форматування, діляться вони на декілька типів: селекторы тегів, ідентифікатори і класи.

  Селекторы тегів використовуються для визначення стилів вбудованих тегів HTML. Класи застосовуються для створення стилів, які можна застосовувати до будь-якого тега HTML, для створення виділень або зміни стилю блоку тексту. Ідентифікатори зазвичай використовуються спільно із скриптами, щоб можна було управляти параметрами стилю динамічно, крім того, кожен ідентифікатор в межах сторінки має бути унікальним.

  Далі у фігурних дужках вказується властивість CSS і через двокрапку його бажане значення. Писати декілька властивостей можна, перераховуючи їх через крапку з комою, або задаючи їх окремо, як показано нижче.

P { color: green; background: #f0f0f0; }

P { color: green; }

P { background: #f0f0f0; }

  У першому рядку для селектора P одночасно встановлюється колір тексту і фону, а в другій - спочатку задається колір тексту, а потім вже колір фону. Оскільки селектор вказаний один, але властивості різні, то вони застосовуватимуться одночасно. Тому подібні форми запису призводять до одного результату.

  Якщо для одного селектора визначаються однакові властивості, але з різними значеннями, то використовуватися буде той, що вказаний в коді останнім.

P { color: green }

P { color: red }

  У рядку показана зміна кольору фону у параграфа <P>. Спочатку задається зелений колір, а потім червоний, який і буде застосований до тексту.

  Будь-які властивості CSS, а також їх значення нечутливі до регістра, тому їх можна набирати як заголовними, так і рядковими символами. Але при цьому їх традиційно завжди пишуть маленькими буквами.

  При описі синтаксису застосовуються наступні позначення:

·      вертикальна риса між значеннями (наприклад, fixed | scroll) вказує на те, що логічне виключає АБО, це означає, що потрібно вибрати тільки одно значення із запропонованих;

·      подвійна вертикальна риса (border - style || color) означає те, що об'єднує АБО (ЧИ/И), кожне значення може використовуватися самостійно або спільно з іншими через пропуск;

·      квадратні дужки ([left | center | right]) позначають групу, з якої, як правило, вибирається одно значення, причому воно не є обов'язковим до використання;

·      два числа у фігурних дужках ({a, b}) говорять, що передування ним значення слід повторювати не менше a, але не більше b разів.

Значення за умовчанням

Якщо якась властивість в стилі не приводиться явно, то браузер, проте, самостійно застосовує його зі значенням, яке встановлене за умовчанням. Подібні значення не завжди є оптимальними, тому їх можна перепризначувати, якщо безпосередньо вказати властивість з бажаним значенням.

Спадкоємство

Спадкоємство - це перенесення правил форматування для елементів, що знаходяться усередині інших. Наприклад, якщо для параграфа <P> заданий червоний колір тексту, а для курсиву <I>, який знаходиться усередині параграфа, немає, то в цьому випадку вкладений елемент наслідує властивості свого батька і курсивний текст також буде червоним.

  Спадкоємство корисне для завдання властивостей, що застосовуються до елементу за умовчанням. Так, досить задати параметри форматування тега <TABLE> і до елементів таблиці <TD> вони будуть застосовані автоматично. Так само можна визначити властивості тега <BODY>, який породжує стиль усіх інших елементів веб-сторінки.

  Існує два варіанти застосування спадкоємства. Якщо властивість наслідує, то для дочірнього елементу ту ж властивість можна не вказувати, крім випадку, коли його використання бажане. Навпаки, якщо властивість НЕ наслідують, то для дочірнього елементу вимагається вказати властивість знову або пропустити, коли воно не потрібно.

Застосування

Властивості CSS можна застосовувати далеко не до усіх елементів веб-сторінки, а тільки до тих, з якими вони "дружать". Більшість властивостей працюють з усіма елементами, а деякі тільки з блоковими або такими, що позиціонуються. Наприклад, для зображень абсолютно безглуздо встановлювати властивості, які маніпулюють з текстом. Отже в кожному випадку слід вирішувати самостійно, коли застосовувати властивість, а коли ні.

Об'єктна модель

Для динамічної зміни властивостей елементу через JavaScript, необхідно знати, як до нього звертатися. Знаючи ім'я об'єкту і бажану властивість, можна вказати його нове значення без перезавантаження веб-сторінки. Так, для приховання і відображення елементу застосовується visibility, а об'єктна модель для управління його значенням - document.getElementById("elementID").style.visibility. Вказуючи замість elementID свій ідентифікатор елементу, заданий параметром id, отримуємо механізм для динамічного приховання деякого вмісту.

Приклад

 

Натисність, щоб переглянути приклад у новому вікні

 

У цьому прикладі текст відображається при наведенні курсора миші на графічну кнопку і знову ховається, коли курсор відводиться геть.

Позначення

Для зручності стильові властивості і їх значення в довіднику розрізняються по кольорах.

<BLOCKQUOTE> - тег. При згадці в довіднику теги, як правило, пишуться заголовними буквами, а в коді прикладу позначаються прописними.

border - bottom - стильова властивість, параметр тега або виділення.

left - значення властивості або параметра тега.